<template>
  <div class="warningWay" v-loading="loading">
    <div class="title">预警提醒设置</div>预警提醒状态：
    <el-radio-group v-model="way" @change="radioChange">
      <el-radio :label="1">开启</el-radio>
      <el-radio :label="0">关闭</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import posts from "@/plugins/request";
import storage from "@/plugins/localStorage";
export default {
  inject: ["reload"],
  data() {
    return {
      way: null,
      loading: false,
    };
  },
  methods: {
    ...mapMutations(["changeWarningWay", "updateUserInfo", "resetHeaderEmail"]),
    async radioChange(val) {
      this.loading = true;
      this.changeWarningWay(val);
      this.way = val;
      const result = await posts.updateWarnPcInfome(val);
      if (result.message !== "success") {
        this.$notify({
          type: "warning",
          title: "提示",
          message: result.info,
        });
      } else {
        this.$notify({
          type: "success",
          title: "成功",
          message: result.info,
        });
        let userInfo = JSON.parse(storage.get("userInfo"));
        userInfo.user.pcinforme = val;
        this.updateUserInfo(userInfo);
      }
      if (val === 0) {
        this.resetHeaderEmail();
      } else {
        this.reload();
      }
      this.loading = false;
    },
  },
  created() {
    this.way = JSON.parse(storage.get("userInfo")).user.pcinforme;
  },
};
</script>

<style scoped>
.warningWay {
  background: #fff;
  min-height: 100%;
  padding: 0 20px 10px 20px;
}
.warningWay .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.warningWay .title::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
</style>